<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath =
            request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
                    + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8" name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>失物招领系统</title>
    <link rel="shortcut icon" href="static/image/logo01.ico"/>
    <link href="static/easyui/themes/default/easyui.css" rel="stylesheet"/>
    <link href="static/easyui/themes/icon.css" rel="stylesheet"/>
    <script type="text/javascript" src="static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
<%
    String username = String.valueOf(session.getAttribute("username"));
%>
<!-- 顶部菜单栏 -->
<div data-options="region:'north',border:false, collapsible:false"
     style="height: 100px;">
    <a id="index" href="javascript:addTab('首页','manage/noticeInfo.jsp');"
       class="easyui-linkbutton">首页</a>
    <a id="announcement" href="javascript:addTab('公告栏','manage/noticeInfo.jsp');"
       class="easyui-linkbutton">公告信息</a>
    <a id="lost" href="javascript:addTab('失物信息','manage/lostInfo.jsp');" class="easyui-linkbutton">失物信息</a>
    <a id="found" href="javascript:addTab('寻物信息','manage/findInfo.jsp');"
       class="easyui-linkbutton">寻物信息</a>

    <!-- 菜单 -->
    <a href="javascript:void(0)" id="mb" class="easyui-menubutton"
       data-options="menu:'#mm',iconCls:'icon-more'"><%=username %>
    </a>
    <div id="mm" style="width:150px;">
        <div data-options="iconCls:'icon-man'" id="myInfo">个人信息</div>
        <div data-options="iconCls:'icon-man'">我的发布
            <div>
                <div id="myLost">查询失物招领</div>
                <div id="myFind">查询寻物启事</div>
                <div id="addLost">发布失物招领</div>
                <div id="addFind">发布寻物启事</div>
            </div>
        </div>
        <div data-options="iconCls:'icon-edit'" onclick="addTab('修改密码', 'manage/editPassword.jsp')">
            修改密码
        </div>
        <div data-options="iconCls:'icon-back'" onclick='exit()'>退出登录</div>
    </div>
</div>
<!-- 左侧菜单栏 -->
<%--<div data-options="region:'west',title:'菜单栏',split:true" style="width: 100px;"></div>--%>
<!-- 中间主面板 -->
<div data-options="region:'center'">
    <!-- 选项板 -->
    <div id="tabsPanel" class="easyui-tabs" style="width: 100%; height: 100%;">
        <!-- 首页 -->
        <div title="首页" style="padding: 20px; display: none;">
            <iframe class="page-iframe" src="manage/noticeInfo.jsp" frameborder="no" border="no"
                    height="100%" width="100%" scrolling="auto"></iframe>
        </div>
    </div>
</div>
<!-- 弹出窗 -->
<div id="topWindow"></div>
<script type="text/javascript">
  $(function () {
    // 打开失物招领启事的窗口
    $('#lossTime').datebox({
      onSelect: function (date) {
        alert(date.getFullYear() + ":" + (date.getMonth() + 1) + ":" + date.getDate());
      }
    });

    $('#myInfo').on('click', function(e) {
      addTab('个人信息','manage/userInfo.jsp');
    })
    $('#myLost').on('click', function(e) {
      addTab('我的失物','manage/queryLost.jsp');
    })
    $('#myFind').on('click', function(e) {
      addTab('我的寻物','manage/queryFind.jsp');
    })
    $('#addFind').on('click', function(e) {
      addTab('发布寻物启事','manage/addFind.jsp');
    })
    $('#addLost').on('click', function(e) {
      addTab('发布失物招领','manage/addLost.jsp');
    })
  });

  // 新增面板
  function addTab(title, url) {
    /* 功能是第一次点击打开tab页就打开一个tab页，当没关闭这个tab页，又去另外一个tab页操作，再回来刚才的tab页后就不用打开另外一个和刚才一样的tab页，而是同一个tab页。 */
    if ($('#tabsPanel').tabs('exists', title)) {
      $('#tabsPanel').tabs('select', title);
    } else {
      var content = '<iframe scrolling="auto" frameborder="0"  src="' + url
          + '" style="width:100%;height:100%;"></iframe>';
      $('#tabsPanel').tabs('add', {
        title: title,
        content: content,
        closable: true
      });
    }
  }

  // 退出登录

  function exit() {
    $.messager.confirm("EXIT", "确认退出？", function (r) {
      if (r) {
        // 向后台发送退出请求
        $.ajax({
          url: "exit",
          type: "post",
          success: function (response) {
            console.log(response);
            window.location.href = 'login.jsp';
          }
        })

      }
    })
  }
</script>
</body>

</html>